<template>
	<view class="question">
		<scroll-view :style="{height:sh+'px'}" class="sv" scroll-y="true">
			<view v-if="history.length>0">
				<view class="dialog" :class="{user:item.role=='user',assistant:item.role!='user'}"
					v-for="(item,index) in history">
					<uni-icons :type="item.role=='user'?'contact':'chat-filled'" size="30"
						:color="item.role=='user'?'#999':'#0f0'"></uni-icons>
					<text class="msg">{{item.content}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="word">
			<uni-easyinput class="input" v-model="question" placeholder="请输入提问内容" />
			<view class="btn" @tap="send">提问</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from '../../utils/config'
	const word = ref("")
	// 对话记录数组
	const history = ref([])

	let question = ref("")
	// 提问的模型
	

	let model = ref({
		"model": "moonshot-v1-8k",
		"messages": [
		],
		"temperature": 0.3
	})
	

	async function send() {
		history.value.push({
			"role": "user",
			"content": question.value
		})
		model.value.messages = history.value
		let res = await uni.$post(CONFIG.kimi_url, model.value)
		console.log(res)
		history.value.push(res.choices[0].message)
		//清空文本框
		question.value = ""

	}

	//sk-dB4SuE7fLQT0tSYaIHT821OkyD88y8KmQmqR91gNXNsDfHFg
</script>

<style lang="scss" scoped>
	
	/* 整体问题区域样式 */
	.question {
	    width: 100%;
	    height: 100vh; /* 占满整个视口高度，可根据实际调整 */
	    display: flex;
	    flex-direction: column;
	    background-color: #f4f4f4; /* 背景颜色，可换为你喜欢的颜色 */
	}
	
	/* 滚动视图区域样式 */
	.sv {
	    flex: 1;
	    border-bottom: 1px solid #ccc; /* 底部添加一条浅灰色分割线 */
	    overflow: hidden; /* 隐藏超出部分 */
	}
	
	/* 对话块整体样式 */
	.dialog {
	    display: flex;
	    align-items: flex-start;
	    margin: 10px;
	    padding: 8px 12px;
	    border-radius: 8px;
	    max-width: 80%; /* 限制最大宽度，让对话内容显示更合理 */
	}
	
	/* 用户对话块样式 */
	.dialog.user {
	    background-color: #e6f7ff; /* 浅蓝色，代表用户 */
	    justify-content: flex-start;
	}
	
	/* 助手对话块样式 */
	.dialog.assistant {
	    background-color: #f0fff4; /* 淡绿色，代表助手 */
	    justify-content: flex-end;
	}
	
	/* 图标样式 */
	.uni-icons {
	    margin-right: 8px;
	}
	
	/* 消息文本样式 */
	.msg {
	    font-size: 16px;
	    line-height: 1.5;
	    word-break: break-all; /* 自动换行 */
	}
	
	/* 输入框及按钮所在区域样式 */
	.word {
	    display: flex;
	    align-items: center;
	    padding: 10px;
	    background-color: #fff; /* 白色背景 */
	}
	
	/* 输入框样式 */
	.input {
	    flex: 1;
	    border: 1px solid #ccc;
	    border-radius: 8px;
	    padding: 8px 12px;
	    font-size: 16px;
	    margin-right: 10px;
	}
	
	/* 提问按钮样式 */
	.btn {
	    padding: 8px 16px;
	    background-color: #007aff; /* 蓝色按钮 */
	    color: #fff;
	    border-radius: 8px;
	    cursor: pointer;
	}
	
	/* 按钮悬停效果 */
	.btn:hover {
	    background-color: #0056b3; /* 按钮悬停时颜色加深 */
	}
	
</style>